<template>
	<view class="u-page">
		<u-swiper
		        :list="list1"
		        @change="change"
		        @click="click"
		></u-swiper>
		
		<u-search placeholder="日照香炉生紫烟" color="red" v-model="keyword"></u-search>
		
		
		        <u-grid
		                :border="false"
		                col="4"
		        >
				
			<!-- 	 <u-notice-bar :text="text1"color="red" direction="column" ></u-notice-bar> -->
				
				  
		            <u-grid-item
		                    v-for="(listItem,listIndex) in list"
		                    :key="listIndex"
		            >
		                <u-icon
		                        :customStyle="{paddingTop:20+'rpx'}"
		                        :name="listItem.name"
		                        :size="22"
		                ></u-icon>
		                <text class="grid-text">{{listItem.title}}</text>
		            </u-grid-item>
		        </u-grid>
		        <u-toast ref="uToast" />
				
				<u-switch v-model="value3" activeColor="#ffff00" loading ></u-switch>
				<u-switch v-model="value4" activeColor="#5ac725" loading ></u-switch>
		
		<u-list
			@scrolltolower="scrolltolower"
		>
			<u-list-item
				v-for="(item, index) in indexList"
				:key="index"
			>
				<u-cell
					:title="`列表长度-${index + 1}`"
				>
					<u-avatar
						slot="icon"
						shape="square"
						size="35"
						:src="item.url"
						customStyle="margin: -3px 5px -3px 0"
					></u-avatar>
				</u-cell>
			</u-list-item>
		</u-list>

	</view>
</template>

<script>
	export default {
		data() {
			return {
			list1: [
			                 'https://pic1.zhimg.com/v2-e584f8413f4a51e0074bc43676608b57_1440w.jpg?source=172ae18b',
			                 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
			                 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
			             ],
						 
						 keyword: '你在狗叫什么？',
						 
						 // text1:'你在狗叫什么？？？？？？？？？？？？ UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用',
						 
						 
						  list: [{
						                     name: 'photo',
						                     title: '图片'
						                     },
						                     {
						                         name: 'lock',
						                         title: '锁头'
						                     },
						                     {
						                         name: 'star',
						                         title: '星星'
						                     },
						                     {
						                         name: 'hourglass',
						                         title: '沙漏'
						                     },
						                     {
						                         name: 'home',
						                         title: '首页'
						                     },
						                     {
						                         name: 'star',
						                         title: '音量'
						                     },
						                 ],
										 
										 value3: false,
										 value4: true,
										 
				indexList: [],
				urls: [
					'https://cdn.uviewui.com/uview/album/1.jpg',
					'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg',
					'https://cdn.uviewui.com/uview/album/4.jpg',
					'https://cdn.uviewui.com/uview/album/5.jpg',
					'https://cdn.uviewui.com/uview/album/6.jpg',
					'https://cdn.uviewui.com/uview/album/7.jpg',
					'https://cdn.uviewui.com/uview/album/8.jpg',
					'https://cdn.uviewui.com/uview/album/9.jpg',
					'https://cdn.uviewui.com/uview/album/10.jpg',
				],
			
			}
		},
		onLoad() {
			this.loadmore()
		},
		methods: {
			scrolltolower() {
				this.loadmore()
			},
			loadmore() {
				for (let i = 0; i < 30; i++) {
					this.indexList.push({
						url: this.urls[uni.$u.random(0, this.urls.length - 1)]
					})
				}
			}
		},
	}
</script>